<template>
  <div class="grid grid-cols-2 h-screen">
    <!-- 默认占两列，order 用于指定排列顺序，md 用于适配非移动端（PC 端） -->
    <div class="col-span-2 order-2 p-10 md:col-span-1 md:order-1 bg-slate-900">
      <!-- 指定为 flex 布局，并设置为屏幕垂直水平居中，高度为 100% -->
      <div
        class="flex justify-center items-center h-full flex-col animate__animated animate__bounceInLeft animate__fast"
      >
        <h2 class="font-bold text-4xl mb-7 text-white">通用后台系统</h2>
        <p class="text-white">
          一款由 Spring Boot3 + Mybaits Plus + Vue 3.5 + Vite 6 开发的通用后台系统
        </p>
        <!-- 指定图片宽度为父级元素的 1/2 -->
        <img src="@/assets/images/developer.png" class="w-1/2" />
      </div>
    </div>
    <div class="col-span-2 order-1 md:col-span-1 md:order-2 bg-white">
      <!-- flex-col 用于指定子元素垂直排列 -->
      <div
        class="flex justify-center items-center h-full flex-col animate__animated animate__bounceInRight animate__fast"
      >
        <!-- 大标题，设置字体粗细、大小、下边距 -->
        <h1 class="font-bold text-4xl mb-5">欢迎回来</h1>
        <!-- 设置 flex 布局，内容垂直水平居中，文字颜色，以及子内容水平方向 x 轴间距 -->
        <div class="flex items-center justify-center mb-7 text-gray-400 space-x-2">
          <!-- 左边横线，高度为 1px, 宽度为 16，背景色设置 -->
          <span class="h-[1px] w-16 bg-gray-200"></span>
          <span>账号密码登录</span>
          <!-- 右边横线 -->
          <span class="h-[1px] w-16 bg-gray-200"></span>
        </div>
        <!-- 引入 Element Plus 表单组件，移动端设置宽度为 5/6，PC 端设置为 2/5 -->
        <el-form class="w-5/6 md:w-2/5">
          <el-form-item>
            <!-- 输入框组件 -->
            <el-input size="large" placeholder="请输入用户名" prefix-icon="User" clearable />
          </el-form-item>
          <el-form-item>
            <!-- 密码框组件 -->
            <el-input
              size="large"
              type="password"
              show-password
              placeholder="请输入密码"
              prefix-icon="Lock"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <div class="flex w-full space-x-2">
              <el-input
                size="large"
                placeholder="请输入验证码"
                prefix-icon="Key"
                clearable
                class="flex-1"
              />
              <img
                src="@/assets/images/developer.png"
                class="h-[40px] w-[100px] cursor-pointer border rounded"
                title="点击刷新验证码"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <!-- 登录按钮，宽度设置为 100% -->
            <el-button class="w-full" size="large" type="primary">登录</el-button>
          </el-form-item>

          <!-- 新增部分：简洁版其他登录方式 -->
          <div class="w-full mb-6">
            <div class="relative flex items-center justify-center my-6">
              <div class="flex-grow border-t border-solid border-gray-300"></div>
              <span class="mx-4 text-sm text-gray-400">其他登录方式</span>
              <div class="flex-grow border-t border-solid border-gray-300"></div>
            </div>

            <!-- 使用 @icon/jsonfly 的微信和QQ图标 -->
            <div class="flex justify-center space-x-8">
              <a href="#" class="flex flex-col items-center group">
                <div
                  class="i-tdesign:logo-wechat-stroke-filled text-2xl text-[#07C160] group-hover:text-[#05a84e]"
                ></div>
                <span class="text-xs mt-1 text-gray-500">微信</span>
              </a>
              <a href="#" class="flex flex-col items-center group">
                <div
                  class="i-tdesign:logo-qq-filled text-2xl text-[#12B7F5] group-hover:text-[#0e9fd8]"
                ></div>
                <span class="text-xs mt-1 text-gray-500">QQ</span>
              </a>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup></script>
